<html>
  <head>
    <title>Barley Yields</title>
    <link type="text/css" rel="stylesheet" href="../ex.css"/>
    <script type="text/javascript" src="../../protovis-r3.2.js"></script>
    <script type="text/javascript" src="barley.js"></script>
    <style type="text/css">

#fig {
  width: 334px;
  height: 833px;
}

    </style>
  </head>
  <body><div id="center"><div id="fig">
    <script type="text/javascript+protovis">

/* Compute yield medians by site and by variety. */
function median(data) pv.median(data, function(d) d.yield);
var site = pv.nest(barley).key(function(d) d.site).rollup(median);
var variety = pv.nest(barley).key(function(d) d.variety).rollup(median);

/* Nest yields data by site then year. */
barley = pv.nest(barley)
    .key(function(d) d.site)
    .sortKeys(function(a, b) site[b] - site[a])
    .key(function(d) d.year)
    .sortValues(function(a, b) variety[b.variety] - variety[a.variety])
    .entries();

/* Sizing and scales. */
var w = 332,
    h = 132,
    x = pv.Scale.linear(10, 90).range(0, w),
    c = pv.Colors.category10();

/* The root panel. */
var vis = new pv.Panel()
    .width(w)
    .height(h * pv.keys(site).length)
    .top(15.5)
    .left(.5)
    .right(.5)
    .bottom(25);

/* A panel per site-year. */
var cell = vis.add(pv.Panel)
    .data(barley)
    .height(h)
    .left(90)
    .top(function() this.index * h)
    .strokeStyle("#999");

/* Title bar. */
cell.add(pv.Bar)
    .height(14)
    .fillStyle("bisque")
  .anchor("center").add(pv.Label)
    .text(function(site) site.key);

/* A dot showing the yield. */
var dot = cell.add(pv.Panel)
    .data(function(site) site.values)
    .top(23)
  .add(pv.Dot)
    .data(function(year) year.values)
    .left(function(d) x(d.yield))
    .top(function() this.index * 11)
    .size(10)
    .lineWidth(2)
    .strokeStyle(function(d) c(d.year));

/* A label showing the variety. */
dot.anchor("left").add(pv.Label)
    .visible(function() !this.parent.index)
    .left(-2)
    .text(function(d) d.variety);

/* X-ticks. */
vis.add(pv.Rule)
    .data(x.ticks())
    .left(function(d) 90 + x(d))
    .bottom(-5)
    .height(5)
    .strokeStyle("#999")
  .anchor("bottom").add(pv.Label);

/* A legend showing the year. */
vis.add(pv.Dot)
    .extend(dot)
    .data([{year:1931}, {year:1932}])
    .left(function(d) 260 + this.index * 40)
    .top(-8)
  .anchor("right").add(pv.Label)
    .text(function(d) d.year);

vis.render();

    </script>
  </div></div></body>
</html>
